<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../文件/jquery-1.8.3.min.js"></script>
    <title>悬浮球</title>
</head>
<body>
    <div id="a"></div>

    <script>

        $(document).ready(function(){
            var box =  $("#a");
            //设置box位置（元素相对于document的位置）
            box.offset({
                left:-40,
                top:0
            })

            var drag = {
                elem:null,
                state:false,
                left:-40,
                fu:false
            }

            box.mousedown(function(){
                if(!drag.state){
                    //通过elem属性，指向box结点对象
                    drag.elem = this ;
                    this.style.backgroundColor='#f00';
                    //存储按下的状态
                    drag.state=true;
            }
            })

            //移动事件：只在按下状态为真时，才触发拖拽效果
            $(document).mousemove(function(e){
                if(drag.state){
                    drag.elem.style.backgroundColor='#f0f'

                    $(drag.elem).offset({
                    left:(window.event.clientX-40),
                    top:(window.event.clientY-40)
                    });
                    drag.left = window.event.clientX;
                }
                });

            $(document).mouseup(function(){
                if(drag.state){
                    drag.elem.style.backgroundColor='#808';
                    drag.state=false;
                    if(drag.left<80){
                    box.offset({
                        left:-40
                    })
                }
                }
            });
            

            //鼠标放置后移出和隐藏
            box.mouseover(function(){
                if(box.offset.left=-40){
                    box.offset({
                        left:0,
                        fu:true
                    })
                }
                console.log(box.offset.fu)
                console.log(box.offset.left)
            }
            )
            box.mouseout(function(){
                console.log('aaa')
                if(box.offset.fu=true){
                    box.offset({
                        left:-40
                    })
                }
            }
            )
        }
        )
    </script>


    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #a{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #808;
            position: absolute;
        }
    </style>
</body>
</html>